<template>
  <div ref="screenWrapper" class="screen-wrapper" :style="wrapperStyle">
    <FloatScreenFull @click="handleButtonClick" />
    <slot />
  </div>
</template>
<script>
import screenfull from 'screenfull';
import FloatScreenFull from '@/components/FloatScreenFull';
export default {
  name: 'ScaleScreen',
  components: {
    FloatScreenFull
  },
  props: {
    wrapperStyle: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
    };
  },
  computed: {
    screenWrapper() {
      return this.$refs['screenWrapper'];
    }
  },
  mounted() {
    this.bus.$on('toggleSideBar', () => {
      this.$emit('handleResize')
    });
    window.addEventListener('resize', () => {
      this.$emit('handleResize')
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', {});
  },
  methods: {
    handleButtonClick() {
      if (!screenfull.isFullscreen) {
        // 如果当前没有元素处于全屏状态，则请求全屏
        screenfull.request(this.$refs.screenWrapper);
      } else {
        // 如果当前有元素处于全屏状态，则退出全屏
        screenfull.exit();
      }
      this.$emit('handleResize')
    }
  }
};
//
</script>

<style scoped>
.screen-wrapper {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    position: relative;
    overflow: hidden;
    z-index: 100;
    transform-origin: left top;
}
</style>
